<template name="餐饮详情">
  <div class="gl_heightFull gl_contentBox">
    <div v-loading="foodLoading">
      <el-row class="gl_mb_15" :gutter="20" type="flex" justify="space-between">
        <el-col :span="10">
          <el-row class="gl_mb_15">
            <el-col>
              <span class="gl_pr_15">{{ detail.name }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="gl_fs_12">
              <span>地址：</span>
              <span>{{ detail.address }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10" align="right" style="line-height: 48px">
          <span>总金额：</span>
          <span>￥ {{ (detail.amount / 100).toFixed(2) }} 元</span>
        </el-col>
      </el-row>
    </div>
    <el-divider />
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="8" :lg="6">
          <p>预定时间</p>
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="到"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="mini"
            value-format="yyyy-MM-dd"
            style="width:100%"
            @change="timeChange"
          />
        </el-col>
        <el-col :md="6" :lg="4">
          <el-col>
            <p>餐别</p>
          </el-col>
          <el-select v-model="form.FoodTypeCode" size="mini" placeholder="请选择餐别" filterable @change="getData()">
            <el-option label="全部" value="" />
            <el-option v-for="item in dict.foodType" :key="item.code" :label="item.value" :value="item.code" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <el-col>
            <p>预定人/联系方式/食品名称</p>
          </el-col>
          <el-input v-model="form.Filter" placeholder="请输入关键词查询" size="mini" clearable @change="getData()" />
        </el-col>
        <el-col :md="8" :lg="6">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getData()">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">重置</el-button>
          <el-button :loading="buLoading" style="margin-top:27px" type="success" size="mini" @click="exportData()">导出Excel表格</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table ref="foodTable" v-loading="loading" :data="foodTable" size="mini">
      <el-table-column type="index" label="序号" :width="50" align="center" />
      <el-table-column prop="foodTypeName" label="餐别" :width="60" align="center" />
      <el-table-column prop="foodName" label="食品名称" />
      <el-table-column prop="price" label="食品金额" :width="80" align="center">
        <template slot-scope="{ row }">
          <span>￥{{ (row.price / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="配送时间" :width="100" align="center">
        <template slot-scope="{ row }">
          <p>{{ 10 > row.deliveryStartHour ? '0' + row.deliveryStartHour : row.deliveryStartHour }}:{{ 10 > row.deliveryStartMinute ? '0' + row.deliveryStartMinute : row.deliveryStartMinute }} - {{ 10> row.deliveryEndHour ? '0' + row.deliveryEndHour : row.deliveryEndHour }}:{{ 10 > row.deliveryEndMinute ? '0' + row.deliveryEndMinute : row.deliveryEndMinute }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="deliveryAddress" label="配送地址" :min-width="160" />
      <el-table-column prop="reserveNumber" label="预订份数" :width="70" align="center" />
      <el-table-column prop="time" label="开始预定时间" :width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.reserveStartDate | FormatDate('yyyy-MM-dd') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="结束预定时间" :width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.reserveEndDate | FormatDate('yyyy-MM-dd') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dayNum" label="预定天数" :width="70" align="center" />
      <el-table-column prop="receptionName" label="预定人姓名" :min-width="120" />
      <el-table-column prop="receptionPhoneNumber" label="预订人手机号" :width="100" />
      <el-table-column prop="amount" label="总金额">
        <template slot-scope="{ row }">
          <span>￥{{ (row.amount / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template slot-scope="{ row }">
          <span>{{ row.remark || '- -' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="form.Page"
        :page-size="form.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import {
  api_GET_EventsManagementLogisticsStatisticsSingleRestaurantStatisticsLaunchedRestaurantId, // 饭店
  api_GET_EventsManagementLogisticsStatisticsRestaurantDetailStatistics
} from '@/extend/api/gameswaggerApi/app';
import {
  Api_GET_EventsManagementLogisticsStatisticsRestaurantDetailStatisticsQO
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'ReceptionDetail',
  data() {
    return {
      loading: false,
      foodLoading: false,
      buLoading: false,
      totalPage: 0, // 总条目数
      time: [], // 预定时间
      form: new Api_GET_EventsManagementLogisticsStatisticsRestaurantDetailStatisticsQO(),
      detail: {},
      foodTable: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getDict();
    this.getRestaurantData();
    this.getData();
  },
  methods: {
    // 获取字典
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取饭店数据
    getRestaurantData() {
      var that = this;
      that.foodLoading = true;
      api_GET_EventsManagementLogisticsStatisticsSingleRestaurantStatisticsLaunchedRestaurantId(that.$route.query.id).then(res => {
        that.detail = res || {};
        that.foodLoading = false;
      }).catch(error => {
        that.foodLoading = false;
        that.$message({ type: 'error', message: error.error && error.error.message || '获取饭店信息失败' });
      });
    },
    // 获取表格数据
    getData(page) {
      var that = this;
      that.loading = true;
      that.form.Page = page || 1;
      that.form.SkipCount = (that.form.Page - 1) * that.form.MaxResultCount;
      that.form.ProviderKey = that.gameId;
      that.form.LaunchedRestaurantId = that.$route.query.id;
      that.form.IncludeFoodType = true;
      api_GET_EventsManagementLogisticsStatisticsRestaurantDetailStatistics(that.form).then(res => {
        that.foodTable = res.items;
        that.totalPage = res.totalCount;
        that.loading = false;
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error && error.error.message || '获取饭店详情失败' });
      });
    },
    // 住店时间选择器
    timeChange(val) {
      if (val instanceof Array) {
        this.form.ReserveStartDate = this.time[0];
        this.form.ReserveEndDate = this.time[1];
      } else {
        this.form.ReserveStartDate = '';
        this.form.ReserveEndDate = '';
      }
      this.getData(this.form.Page);
    },
    // 重置搜索表单
    reset() {
      this.form = new Api_GET_EventsManagementLogisticsStatisticsRestaurantDetailStatisticsQO();
      this.time = [];
      this.getData();
    },
    // 导出表格
    exportData() {
      var that = this;
      this.buLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = that.detail.name + '餐饮详情' + '.xlsx';
      const params = {};
      params.ReportName = 'CateringEntryStatistics';
      const form = JSON.parse(JSON.stringify(that.form));
      form.RestaurantNameFilter = that.detail.name;
      delete form.SkipCount;
      delete form.MaxResultCount;
      delete form.Page;
      params.RestaurantEntryInput = JSON.stringify(form);
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, params).then(res => {
        that.buLoading = false;
      }).catch(error => {
        that.buLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.form.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.getData();
    },
    pageIndexChange(currentPage) {
      this.getData(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
